<template>
	<el-main>
		<el-row :gutter="20">
			<el-col :span="10" :offset="6">
				<div class="detail-title">
					<span v-if="$route.query.deptId">
						修改
					</span>
					<span v-else>
						新增
					</span>
				</div>
				<el-form :model="form" :rules="rules" ref="form">
					<el-form-item label="部门名称" prop="deptName">
						<el-input v-model="form.deptName">
						</el-input>
					</el-form-item>
					<el-form-item label="描述" prop="description">
						<el-input
							type="textarea" 
							rows="3" 
							maxlength="120"
							show-word-limit
							v-model="form.description">
						</el-input>
					</el-form-item>
					<el-form-item label="上级部门" prop="parentId">
						<el-select style="width: 100%;" v-model="form.parentId" filterable placeholder="请选择">
							<el-option
								v-for="item in departmentList"
								:key="item.deptId"
								:label="item.deptName"
								:value="item.deptId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态">
						<el-radio-group v-model="form.status">
							<el-radio border :label="1">启用</el-radio>
							<el-radio border :label="2">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<template v-if="!$route.query.deptId">
							<el-button type="primary" @click="createDepartment('form')">
								提交信息
							</el-button>
							<el-button type="warning" native-type="reset">
								重置表单
							</el-button>
						</template>
						<el-button type="primary" v-else @click="updateDepartment('form')">
							修改信息
						</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import { 
		getAvailableDepartmentList,
		getDepartmentById,
		createDepartment,
		updateDepartment } from '@/api/department.js'
	export default {
		data() {
			return {
				departmentList: [],
				form: {
					status: 1
				},
				rules: {
					deptName: [
						{ required: true, message: '请输入部门名称', trigger: ['blur', 'change'] }
					],
					parentId: [
						{ required: true, message: '请选择上级部门', trigger: ['blur', 'change'] }
					]
				}
			}
		},
		mounted() {
			if (this.$route.query.deptId) {
				this.getDepartmentById(
					this.$route.query.deptId
				);
				this.getAvailableDepartmentList(
					this.$route.query.deptId
				);
			} else {
				this.getAvailableDepartmentList(0);
			}
		},
		methods: {
			// 可用的部门列表
			getAvailableDepartmentList(deptId) {
				let _this = this;
				getAvailableDepartmentList({'deptId': deptId}).then(function(res){
					if (res.code === 200) {
						_this.departmentList = res.data;
						let topDepartment = {
							deptId: 0,
							deptName: '顶级部门'
						}
						_this.departmentList.unshift(topDepartment);
					}
				})
			},
			// 详情信息
			getDepartmentById(deptId) {
				let _this = this;
				getDepartmentById({'deptId': deptId}).then(function(res){
					if (res.code === 200) {
						_this.form = res.data;
					}
				})
			},
			// 创建信息
			createDepartment(form) {
				this.$refs[form].validate((valid) => {
					let _this = this;
					if (valid) {
						createDepartment(_this.form).then(function(res){
							if (res.code === 200) {
								_this.$message({
									message: res.msg,
									type: 'success'
								});
								_this.$router.push('./list');
							} else {
								_this.$message.error(res.msg);
							}
						})
					}
				})
			},
			// 修改信息
			updateDepartment(form) {
				this.$refs[form].validate((valid) => {
					let _this = this;
					if (valid) {
						updateDepartment(_this.form).then(function(res){
							if (res.code === 200) {
								_this.$message({
									message: res.msg,
									type: 'success'
								});
							} else {
								_this.$message.error(res.msg);
							}
						})
					}
				})
			}
		}
	}
</script>